<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>雪花</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<style>
body {
    background: #77bbdd;
}
.snow {
    position: absolute;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.snow div {
    position: absolute;
    top: 10px;
    width: 35px;
    border-top: 1px solid #fff;
}
.line0 {
    transform: rotateZ(40deg);
}
.line1 {
    transform: rotateZ(80deg);
}
.line2 {
    transform: rotateZ(120deg);
}
.line3 {
    transform: rotateZ(160deg);
}
</style>
<body>
    <script>
        function CreateSnow(){
            this.snowFlake();
        }
        CreateSnow.prototype = {
            constructor : CreateSnow,
            snowFlake : function (){
                that = this;
                function bulidSnow(){
                    let snow = document.createElement("div");
                    snow.className = "snow",
                    oBody = document.body,
                    bw = oBody.clientWidth,
                    bh = oBody.clientHeight;
                    snow.style.left = `${Math.random()*bw}px`;
                    snow.style.top = `${Math.random()*611}px`;
                    for(let i = 0; i < 4; i++){
                        let line = document.createElement("div");
                        line.className =  "line"+i;
                        snow.appendChild(line);
                    }
                    that.addSnow(snow);
                }
                let timer1;
                timer1 = setInterval( bulidSnow, 1000);
                window.onfocus = function (){
                    timer1 = setInterval( bulidSnow, 1000);
                }
                window.onblur = function (){
                    clearInterval(timer1);
                }
            },
            addSnow : function(snow){
                let that = this;
                document.body.appendChild(snow);
                let opacity = 0;
                let timer2 = setInterval(function (){
                    opacity += 0.1;
                    if (opacity > 1) {
                        clearInterval(timer2);
                        that.runSnow(snow);
                    }
                    snow.style.opacity = opacity;
                }, 1000/60)

            },
            runSnow : function (snow){
                let sTop = snow.offsetTop,
                    sLeft = snow.offsetLeft;
                function flySnow(){
                    sTop--;
                    sLeft--;
                    snow.style.top = sTop+"px";
                    snow.style.left = sLeft+"px";
                    if(sTop === 0 && sLeft === 0){
                        cancelAnimationFrame(flySnow);
                        snow.parentNode.removeChild(snow);
                    }
                    requestAnimationFrame(flySnow);
                }
                requestAnimationFrame(flySnow);
            },
        };
        let snows = new CreateSnow();
    </script>
</body>
</html>
